<template>
  <div class="news-article-editor">
    <div class="editor-layout">
      <div class="main-editor">
        <div class="form-section">
          <h3>封面图片</h3>
          <el-upload
            class="cover-uploader"
            action="#"
            :http-request="uploadImage"
            :show-file-list="false"
            :before-upload="beforeUpload"
          >
            <img v-if="modelValue.cover_image" :src="modelValue.cover_image" class="cover-image">
            <div v-else class="cover-placeholder">
              <el-icon><Plus /></el-icon>
            </div>
          </el-upload>
        </div>
        
        <div class="form-section">
          <h3>文章摘要</h3>
          <el-input
            v-model="modelValue.summary"
            type="textarea"
            :rows="3"
            placeholder="输入文章摘要（选填）"
            maxlength="300"
            show-word-limit
          />
        </div>
        
        <div class="form-section">
          <h3>正文内容</h3>
          <div class="rich-text-editor">
            <el-input
              v-model="modelValue.content"
              type="textarea"
              :rows="15"
              placeholder="输入文章内容"
            />
          </div>
        </div>
        
        <div class="form-section">
          <h3>标签</h3>
          <el-tag
            v-for="tag in modelValue.tags"
            :key="tag"
            closable
            @close="removeTag(tag)"
            class="tag-item"
          >
            {{ tag }}
          </el-tag>
          
          <el-input
            v-if="inputTagVisible"
            ref="tagInput"
            v-model="inputTagValue"
            class="tag-input"
            size="small"
            @keyup.enter="confirmTag"
            @blur="confirmTag"
          />
          
          <el-button v-else size="small" @click="showTagInput">+ 添加标签</el-button>
        </div>
      </div>
      
      <div class="side-editor">
        <el-collapse>
          <el-collapse-item title="SEO设置" name="seo">
            <div class="form-group">
              <label>SEO标题</label>
              <el-input v-model="modelValue.meta_title" placeholder="SEO标题" />
            </div>
            
            <div class="form-group">
              <label>SEO描述</label>
              <el-input
                v-model="modelValue.meta_description"
                type="textarea"
                :rows="3"
                placeholder="SEO描述"
              />
            </div>
            
            <div class="form-group">
              <label>SEO关键词</label>
              <el-input v-model="modelValue.meta_keywords" placeholder="关键词，用逗号分隔" />
            </div>
          </el-collapse-item>
          
          <el-collapse-item title="发布设置" name="publish">
            <div class="form-group">
              <label>发布日期</label>
              <el-date-picker
                v-model="modelValue.publish_date"
                type="datetime"
                placeholder="选择发布日期时间"
                style="width: 100%"
              />
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update:modelValue'])

const inputTagVisible = ref(false)
const inputTagValue = ref('')
const tagInput = ref<HTMLInputElement | null>(null)

// 上传图片前的验证
const beforeUpload = (file: File) => {
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2
  
  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return false
  }
  
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过2MB!')
    return false
  }
  
  return true
}

// 上传封面图片
const uploadImage = (options: any) => {
  const file = options.file
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = () => {
    const newValue = { ...props.modelValue, cover_image: reader.result }
    emit('update:modelValue', newValue)
  }
}

// 显示标签输入框
const showTagInput = () => {
  inputTagVisible.value = true
  nextTick(() => {
    tagInput.value?.focus()
  })
}

// 确认添加标签
const confirmTag = () => {
  if (inputTagValue.value) {
    if (!props.modelValue.tags) {
      const newValue = { ...props.modelValue, tags: [inputTagValue.value] }
      emit('update:modelValue', newValue)
    } else {
      const newTags = [...props.modelValue.tags, inputTagValue.value]
      const newValue = { ...props.modelValue, tags: newTags }
      emit('update:modelValue', newValue)
    }
  }
  inputTagVisible.value = false
  inputTagValue.value = ''
}

// 移除标签
const removeTag = (tag: string) => {
  const newTags = props.modelValue.tags.filter((t: string) => t !== tag)
  const newValue = { ...props.modelValue, tags: newTags }
  emit('update:modelValue', newValue)
}
</script>

<style scoped>
.editor-layout {
  display: flex;
  gap: 20px;
}

.main-editor {
  flex: 7;
}

.side-editor {
  flex: 3;
}

.form-section {
  margin-bottom: 20px;
}

.form-section h3 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
}

.cover-uploader {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cover-image {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
}

.cover-placeholder {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
}

.cover-placeholder:hover {
  border-color: #409eff;
}

.tag-item {
  margin-right: 8px;
  margin-bottom: 8px;
}

.tag-input {
  width: 120px;
  margin-right: 8px;
  vertical-align: bottom;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}
</style> 